<template>
	<view>
		<view
			style=" display: flex; background-image: url('https://pic.imgdb.cn/item/653a64edc458853aef58c390.gif'); height: 140px;">
			<view style="margin-left: 100px;">
				<image @click="onChangeAvatar" style="width: 70px; height: 70px; border-radius: 15%; margin-top: 25px;"
					:src="userFormData.avatar" />
			</view>
			<view style="margin-left: 15px; margin-top: 35px;">
				<view style="margin-bottom: 6px;"><text
						style="color: #0081ff; font-size: 20px;">{{userFormData.name}}</text></view>
				<view><text style="color: #8dc63f; font-size: 13px;">{{userFormData.phone}}</text></view>
			</view>
		</view>
		<view>
			<!-- 其他数据展示 -->
			<view>
				<view class="line2"></view>
				<view @click="toUserEvaluation" style="display: flex; height: 60px;">
					<uni-icons class="uni_icon_left" type="chatboxes" size="25"></uni-icons>
					<text class="Text">用户评价</text>
					<uni-icons class="uni_icon_right" color="#A9A9A9" type="right" size="25"></uni-icons>
				</view>
				<view class="line2"></view>
				<view @click="checkVersion" style="display: flex; height: 60px;">
					<uni-icons class="uni_icon_left" type="download" size="25"></uni-icons>
					<text class="Text">检查更新</text>
					<uni-icons class="uni_icon_right" color="#A9A9A9" type="right" size="25"></uni-icons>
				</view>
				<view class="line2"></view>
				<view @click="toFeedBack" style="display: flex; height: 60px;">
					<uni-icons class="uni_icon_left" type="help" size="25"></uni-icons>
					<text class="Text">意见反馈</text>
					<uni-icons class="uni_icon_right" color="#A9A9A9" type="right" size="25"></uni-icons>
				</view>
				<view class="line2"></view>
				<view @click="toAbout" style="display: flex; height: 60px;">
					<uni-icons class="uni_icon_left" type="chatbubble" size="25"></uni-icons>
					<text class="Text">技术交流</text>
					<uni-icons class="uni_icon_right" color="#A9A9A9" type="right" size="25"></uni-icons>
				</view>
				<view class="line2"></view>
				<view v-if="flag" style="margin-top: 60px;">
					<button @click="doLogOut"
						style="border-radius: 20px; color: white; backgroundColor: #e54d42; height: 45px; width: 220px;"
						size="default" type="primary"><text style="font-size: 16px;">退出登录</text></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onTabItemTap
	} from '@dcloudio/uni-app';
	import {
		logout
	} from "@/api/login.js";
	import {
		checkToken
	} from '@/utils/checkToken.js';
	import {
		userStore
	} from '@/stores/user.js';
	import {
		update
	} from '@/api/my.js';
	import {
		getUserInfos
	} from '@/api/my.js';
	import {
		share
	} from '@/utils/share.js';

	const user = userStore();
	onLoad(async () => {
		share();
		await getUserInfo();
	});
	//监听底部tabbar
	onTabItemTap(() => {
		//检查是否登录
		if (!checkToken()) {
			uni.redirectTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		} else {
			const userInfo = uni.getStorageSync('user');
			getUserInfos(userInfo.phone).then(res => {
				if (res.code === 200) {
					const user = res.data;
					userFormData.value.avatar = user.avatar;
					userFormData.value.phone = user.phone;
					userFormData.value.name = user.name;
				}
			});
		};
	});

	//切换头像
	const userFormData = ref({
		name: '',
		phone: '',
		avatar: ''
	});
	const flag = ref(false);

	function getUserInfo() {
		const userInfo = uni.getStorageSync('user');
		userFormData.value.avatar = userInfo.avatar;
		userFormData.value.phone = userInfo.phone;
		userFormData.value.name = userInfo.name;
		flag.value = uni.getStorageSync('flag');
	};

	//保存修改头像数据
	function saveData() {
		update(userFormData.value);
	};

	function onChangeAvatar() {
		//调用小程序的接口
		uni.chooseImage({
			count: 1,
			success(res) {
				//获取本地路径
				const tempFilePath = res.tempFilePaths[0];
				//文件上传接口
				uni.uploadFile({
					//文件上传请求路径
					url: 'https://www.sixkey-world.top:8600/common/upload',
					filePath: tempFilePath,
					name: 'file',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: "上传成功！",
								icon: 'success'
							});
							const avatar = JSON.parse(res.data).data;
							userFormData.value.avatar = avatar;
							//将修改的用户头像报存到数据中
							saveData();
						} else {
							uni.showToast({
								title: "上传头像出现异常",
								icon: 'error'
							})
						}
					}
				})
			}
		})
	};

	//退出登录
	function doLogOut() {
		uni.showModal({
			title: '提示',
			content: '是否退出登录',
			success: function(res) {
				if (res.confirm) {
					logout().then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '退出成功',
								icon: 'success'
							});
							uni.removeStorageSync('user');
							uni.removeStorageSync('token');
							uni.removeStorageSync('flag');
							//清理本地数据
							uni.clearStorageSync();
							user.userInfo.value = '';
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 200);
						}
					})
				}
			}
		});
	};

	//下拉刷新请求数据
	onPullDownRefresh(() => {
		const userInfo = uni.getStorageSync('user');
		getUserInfos(userInfo.phone).then(res => {
			if (res.code === 200) {
				const user = res.data;
				userFormData.value.avatar = user.avatar;
				userFormData.value.phone = user.phone;
				userFormData.value.name = user.name;
			}
		});
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	//检查更新
	function checkVersion() {
		uni.showToast({
			title: '当前已是最新版本！',
			icon: 'none'
		})
	};

	//去用户评价页面
	function toUserEvaluation() {
		uni.navigateTo({
			url: '/pages/userEvaluation/userEvaluation'
		})
	};

	//去意见反馈页面
	function toFeedBack() {
		uni.navigateTo({
			url: '/pages/feedBack/feedBack'
		})
	};

	function toAbout() {
		uni.navigateTo({
			url: '/pages/about/about'
		})
	};
</script>

<style scoped lang="scss">
	.global {
		background-color: #F5F5F5;
		height: auto;
	}

	.line2 {
		height: 1px;
		background: #DCDCDC;
	}

	.uni_icon_right {
		margin-top: 17px;
		margin-left: 235px;
	}

	.Text {
		margin-top: 19px;
		margin-left: 6px;
		margin-right: 15px;
		font-size: 15px;
	}

	.uni_icon_left {
		margin-top: 17px;
		margin-left: 6px;
	}
</style>